* {
    margin: 0;
    padding: 0;
}

//全局滚动条样式
::-webkit-scrollbar{
    width:4px;
    height: 4px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 50px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.2);
  }
  ::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.2);
  }

#root {
    width: 100vw;
    height: 100vh;
    // overflow: hidden;
}

@header-color: #343434;
@aside-color: #333;
@li-color: #363636;
@font-color: #fff;

.layout {
    width: 100%;
    height: 100%;
    
    .header {
        height: 4rem;
        background-color: @header-color;
        display: flex;
        .logo {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: nowrap;
            cursor: pointer;
            .image {
                height: 2rem;
            }
            .title {
                color: @font-color;
                font-size: 1.25rem;
                font-weight: bold;
                margin-left: .75rem;
                overflow: hidden;
                white-space:nowrap;
                text-overflow: ellipsis;
            }
            
        }

        .info {
            flex: 4;
            display: flex;
            justify-content: right;
            align-items: center;
            padding-right: 1rem;

            .icon {
                font-size: 1.75rem;
                color: @font-color;
                cursor: pointer;
            }
        }
    }

    .section {
        display: flex;
        height: calc( 100% - 4rem);
        align-items: stretch;

        .aside {
            flex: 1;
            height: 100%;
            overflow-y: scroll;
            background-color: @aside-color;
        }
        
        .main {
            flex: 4;
            height: 100%;

            .container {
                padding: .5rem;
                display: flex;
                height: 100%;
                align-items: stretch;
                .mdx {
                    flex: 2;
                    height: 100%;
                    overflow-y: scroll;
                }

                .codepen {
                    flex: 1;
                    padding-left: .5rem;
                }
            }
        }
    }
}





